<template>
  <div class="component-container">
    <el-card shadow="never">
      <el-form :model="value" :rules="rules" ref="houseInfoForm" label-width="130px" style="width: 80%" size="small">
        <el-form-item label="房源标题：" prop="title">
          <el-input v-model="value.title"></el-input>
        </el-form-item>
        <el-form-item label="房源类型：" prop="type">
          <el-radio-group v-model="value.type">
            <el-radio
              v-for="dict in dict.type.house_type"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="房型：">
          <el-col :span="5">
            <el-form-item label="房 间" prop="room" style="margin-left: -72px;">
              <el-select v-model="value.room" placeholder="请选择" clearable >
                <el-option
                  v-for="dict in dict.type.house_select_num"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="厅 室" prop="hall" style="margin-left: -75px">
              <el-select v-model="value.hall" placeholder="请选择" clearable >
                <el-option
                  v-for="dict in dict.type.house_select_num"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="卫生间" prop="toilet" style="margin-left: -70px">
              <el-select v-model="value.toilet" placeholder="请选择" clearable >
                <el-option
                  v-for="dict in dict.type.house_select_num"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="阳 台" prop="balcony" style="margin-left: -75px">
              <el-select v-model="value.balcony" placeholder="请选择" clearable >
                <el-option
                  v-for="dict in dict.type.house_select_num"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="厨 房" prop="kitchen" style="margin-left: -80px">
              <el-select v-model="value.kitchen" placeholder="请选择" clearable >
                <el-option
                  v-for="dict in dict.type.house_select_num"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="房屋面积：" prop="area">
          <el-input placeholder="请输入房屋面积" v-model="value.area">
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="房屋朝向：" prop="orienta">
          <el-select v-model="value.orienta" placeholder="请选择" clearable>
            <el-option
              v-for="dict in dict.type.house_orienta"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="小区/公寓名称：" prop="villageName">
          <el-input v-model="value.villageName" placeholder="请选择小区" disabled>
            <el-button slot="prepend" icon="el-icon-map" @click="openVillage" type="primary">选择小区/公寓</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="附近地铁站：" prop="subwayName">
          <el-input v-model="value.subwayName" placeholder="请选择附近地铁站" disabled>
            <el-button slot="prepend" icon="el-icon-map" @click="openSubway" type="primary">选择地铁站</el-button>
          </el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" size="medium" @click="handleNext('houseInfoForm')">下一步，填写房屋配置</el-button>
        </el-form-item>

        <select-village ref="SelectVillage"  @confirmVillage="confirmVillage"/>
        <select-subway ref="SelectSubway" @confirmSubway="confirmSubway"/>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import SelectVillage from "./SelectVillage";
  import SelectSubway from "./SelectSubway";

  export default {
    components: {
      SelectSubway,
      SelectVillage
    },
    name: "HouseInfoDetail",
    dicts: ['house_type','house_select_num','house_orienta'],
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        rules: {
          title: [
            {required: true, message: '请输入房源标题', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          type: [{required: true, message: '请选择房源类型', trigger: 'blur'}],
          area: [{required: true, message: '请输入房屋面积', trigger: 'blur'}],
          orienta: [{required: true, message: '请选择房屋朝向', trigger: 'blur'}],
          villageName: [{required: true, message: '请选择小区/公寓名称', trigger: 'blur'}]
        }
      }
    },
    methods: {
      /** 打开选择小区弹窗 */
      openVillage() {
        this.$refs.SelectVillage.show();
      },
      /* 确认选择小区 */
      confirmVillage(villageInfo) {
        this.value.villageId = villageInfo.villageId;
        this.value.villageName = villageInfo.name
        this.value.address = villageInfo.address
        this.value.zoneId = villageInfo.zoneId
      },
      /** 打开选择地铁弹窗 */
      openSubway() {
        this.$refs.SelectSubway.show();
      },
      /* 确认选择地铁 */
      confirmSubway(checkData) {
        this.value.subway = checkData.ids
        this.value.subwayName = checkData.names
      },
      handleNext(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('next');
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
  .app-container {
    width: 1200px;
    margin: 50px auto;
    border: 1px solid #eee;
  }
</style>
